import React, { Component } from 'react'
import classnames from 'classnames'
import styles from './TableOfContents.module.scss'
import api from './../../serve/api'
import { withRouter } from 'react-router-dom'

const datas = ['全部', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 
'U', 'V', 'W', 'X', 'Y', 'Z']

class TableOfContents extends Component {
  constructor(props) {
    super(props)
    this.state = {
      select: '全部',
      orgs: []
    }
    this.onSortItem = this.onSortItem.bind(this)
  }

  componentDidMount() {
    this.getOrg()
  }

  async getOrg(nameChar) {
    let data 
    if (nameChar === '全部') {
       data = await api.listOrg()  
    } else {
       data = await api.listOrg({ nameChar })
    }
    
    if (data && data.code === '000000') {
      this.setState({
        orgs: data.result || []
      })
    }
  }

  onSortItem(item) {
    this.setState({
      select: item
    })
    this.getOrg(item)
  }

  render() {
    const { select, orgs } = this.state
    return (
      <div className={styles.table_of_contents}>
        <div className={styles.header} />
        <div className={styles.contents_container_bg}>
          <div className={styles.contents_container}>
            <div className={styles.sort}>
              {datas.map((item, index) => {
                return (
                  <div 
                  className={classnames([styles.sort_item, { [styles.sort_item_active]: item === select }])} 
                  key={index} 
                  onClick={() => this.onSortItem(item)}
                  >
                    {item}
                  </div>
                )
              })}
            </div>
            <div className={styles.sort_contents}>
              {orgs.map((item, index) => {
                return (
                  <span key={index} 
                    // onClick={() => routerPush('/mainPage/org')}
                  >
                    {item.name || ''}
                  </span>
                  )
                })}
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default withRouter(TableOfContents)
